<template>
	<view class="components-input tn-safe-area-inset-bottom">
		<tn-nav-bar fixed :isBack='false'>请给文明以岁月</tn-nav-bar>
		<!-- 页面内容 -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<demo-title title="绘画参数" :contentPadding="false">
				
				<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
					<view class="content__title">模型(ckpt)</view>
					<view class="content__data tn-flex-1">
						<tn-input type="text" disabled v-model="model" ></tn-input>
					</view>
				</view>
				<view class="tn-text-shadow-red tn-margin tn-text-sm">
					<text>当前模型AOM3，提词如：1girl,toga，不会写就下面找模版</text>
				</view>
				<view class="content tn-flex tn-flex-direction-row tn-flex-col-center" v-for="(item,index) in paramList"
					:key="index">
					<view class="content__title">{{item.desc}}</view>
					<view class="content__data tn-flex-1" v-if="item.type == 'string'">
						<tn-input type="textarea" :placeholder="item.default" v-model="item.value"></tn-input>
						
					</view>
					<view class="content__data tn-flex-1" v-else-if="item.type == 'slider'">
						<tn-slider v-model="item.value" :step="item.step" :min="item.min" :max="item.max"></tn-slider>
						<view class="tn-margin-left-sm">{{item.value}}</view>
					</view>
				</view>
				<!-- <text>{{paramList}}</text> -->
				<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
					<view class="content__title">面部修复</view>
					<view class="content__data tn-flex-1">
						<tn-switch :disabled="true"></tn-switch>
					</view>
					<view class="content__title">无缝贴图</view>
					<view class="content__data tn-flex-1">
						<tn-switch :disabled="true"></tn-switch>
					</view>
				</view>
				
				<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
					<view class="content__title">管理员测试KEY</view>
					<view class="content__data tn-flex-1">
						<tn-input type="text" placeholder="默认没必要填写," v-model="param_key"></tn-input>
					</view>
				</view>
				<view style="margin: 20rpx;">
					<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF"
						margin="10rpx 0" @click="submitTask()">提交任务</tn-button>
				</view>
				<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">

					<view class="content__title">任务ID</view>
					<view class="content__data tn-flex-1">
						<tn-input type="text" placeholder="提交后返回的任务ID" v-model="task_id"></tn-input>
					</view>
				</view>
			</demo-title>
		</view>
	</view>
</template>

<script>
	import demoTitle from '@/libs/components/demo-title.vue'

	export default {
		name: 'ComponentsInput',
		components: {
			demoTitle
		},
		data() {
			return {
				url: 'http://192.168.5.10:9527/ai/submit',
				// url: 'https://ai.moyi.vip/ai/submit',
				task_id: '',
				param_key:'',
				template:[
					{
						img:'https://moyi-tiktok.oss-cn-beijing.aliyuncs.com/uploads/20230324/1107008_c8e50bcc0a9e9ab3ad51eacb80f1c568.png',
						prompt:"((masterpiece)), best quality, perfect anatomy, (1girl, solo focus:1.4), pov, looking at viewer, flower trim,(perspective, sideway, From directly above ,lying on water, open hand, palm, :1.3),(Accurate five-fingered hands, Reach out, hand focus, foot focus, Sole, heel, ball of the thumb:1.2), (outdoor, sunlight:1.2),(shiny skin:1.3),,(masterpiece, white border, outside border, frame:1.3),, (motherhood, aged up, mature female, medium breasts:1.2), (curvy:1.1), (single side braid:1.2), (long hair with queue and braid, disheveled hair, hair scrunchie, tareme:1.2), (light Ivory hair:1.2), looking at viewer,, Calm, Slight smile,,(anemic, dark, lake, river,puddle, Meadow, rock, stone, moss, cliff, white flower, stalactite, Godray, ruins, ancient, eternal, deep ,mystic background,sunlight,plant,lily,white flowers, Abyss, :1.2), (orange fruits, citrus fruit, citrus fruit bearing tree:1.4), volumetric lighting,good lighting,, masterpiece, best quality, highly detailed,extremely detailed cg unity 8k wallpaper,illustration,((beautiful detailed face)), best quality, (((hyper-detailed ))), high resolution illustration ,high quality, highres, sidelighting, ((illustrationbest)),highres,illustration, absurdres, hyper-detailed, intricate detail, perfect, high detailed eyes,perfect lighting, (extremely detailed CG:1.2)",
						negative_prompt:"(bad_prompt_version2:1), distant view, lip, Pregnant, maternity, pointy ears, realistic, tan, muscular, greyscale, monochrome, lineart, 2koma, 3koma, 4koma, manga, 3D, 3Dcubism, pablo picasso, disney, marvel, mutanted breasts, mutanted nipple, cropped, lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, artist name, lowres, trademark, watermark, title, text, deformed, bad anatomy, disfigured, mutated, extra limbs, ugly, missing limb, floating limbs, disconnected limbs, out of frame, mutated hands and fingers, poorly drawn hands, malformed hands, poorly drawn face, poorly drawn asymmetrical eyes, (blurry:1.4), duplicate (loli, petite, child, infant, toddlers, chibi, sd character, teen age:1.4), tsurime, helmet hair, evil smile, smug_face, naughty smile, multiple view, Reference sheet, (worst quality, low quality:1.4),",
					},
					{
						img:'https://moyi-tiktok.oss-cn-beijing.aliyuncs.com/uploads/20230324/708084_61fc7abd724281d2ce5d00cfcbc3c3d0.png',
						prompt:"street, 130mm f1.4 lens, ,(shiny skin:1.3),, (teen age, school uniform:1.2), (glasses, black hair, medium hair with queue and braid, disheveled hair, hair scrunchie, tareme:1.2), looking at viewer,, Calm, Slight smile,",
						negative_prompt:"(bad_prompt_version2:1), distant view, lip, Pregnant, maternity, pointy ears, realistic, tan, muscular, greyscale, monochrome, lineart, 2koma, 3koma, 4koma, manga, 3D, 3Dcubism, pablo picasso, disney, marvel, mutanted breasts, mutanted nipple, cropped, lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, artist name, lowres, trademark, watermark, title, text, deformed, bad anatomy, disfigured, mutated, extra limbs, ugly, missing limb, floating limbs, disconnected limbs, out of frame, mutated hands and fingers, poorly drawn hands, malformed hands, poorly drawn face, poorly drawn asymmetrical eyes, (blurry:1.4), duplicate (loli, petite, child, infant, toddlers, chibi, sd character, teen age:1.4), tsurime, helmet hair, evil smile, smug_face, naughty smile, multiple view, Reference sheet, (worst quality, low quality:1.4),"
					},
					{
						
					}
				],
				model:'暂时没有模型更换的功能',
				paramList: [{
						name: 'prompt',
						desc: "提示词",
						type: "string",
						default: "1girl",
						value: "",
					}, {
						name: 'negative_prompt',
						desc: "反向词",
						type: "string",
						default: "nsfw",
						value: "",
					}, {
						name: 'width',
						desc: "图片宽度",
						type: "slider",
						default: "368",
						max: 1024,
						min: 64,
						step: 8,
						value: 368,
					}, {
						name: 'height',
						desc: "图片高度",
						type: "slider",
						default: "368",
						max: 1024,
						step: 8,
						min: 64,
						value: 368,
					},
					{
						name: 'steps',
						desc: "采样步数",
						type: "slider",
						default: "368",
						max: 50,
						min: 1,
						value: 20,
					},
				],
			}
		},
		methods: {
			submitTask() {
				let param = {};
				uni.showLoading({
					title:'请求中',
				});
				this.paramList.forEach((item) => {
					param[item.name] = item.value ? item.value : item.default;
				})
				param['param_key'] = this.param_key;
				
				uni.request({
					url: this.url,
					method: "POST",
					data: param,
					success: (res) => {
						uni.hideLoading();
						res = res.data;
						console.log('res', res);
						if (res.code) {
							this.task_id = res.data.task_id;
							uni.showModal({
								title: '任务ID:'+ res.data.task_id,
								content: '已经开始处理，前往手动跳过去查询进度，懒得写监听了',
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
									}
								}
							});
						} else {
							uni.showModal({
								title: '哦豁',
								content: res.msg
							});
						}
						console.log(res.data);
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showModal({
							title: '哈哈',
							content: '服务很可能被我关了',
							success: function (res) {
							}
						});
					},
				});
				
				console.log('param', param);
			}
		}
	}
</script>


<style lang="scss" scoped>
	.components-input {
		background-color: $tn-bg-gray-color;
		min-height: 100vh;

		.content {
			background-color: #FFFFFF;

			&__title {
				padding: 30rpx;
			}

			&__data {
				margin: 10rpx 0;
				margin-right: 30rpx;
			}
		}
	}
</style>